<template>
  <div class="el-card filter-container is-never-shadow">
    <div class="el-card__body">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <button class="el-button el-button--primary el-button--small btn-search" @click="queryResults"><span> 查询结果 </span></button>
        <button class="el-button el-button--default el-button--small btn-search" @click="resetOrder"><span>重置</span></button>
      </div>
      <!-- 商品列表  查询 -->
      <form style="margin-top: 15px">
        <form class="el-form el-form--inline">
          <div class="el-form-item el-form-item--small">
            <label class="el-form-item__label" style="width: 140px">输入搜索:</label>
            <div class="el-form-item__content">
              <div class="el-input el-input--small" style="width: 203px">
                <input type="text" autocomplete="off" placeholder="订单编号" v-model="SearchInput1" class="el-input__inner" />
              </div>
            </div>
          </div>
          <div class="el-form-item el-form-item--small">
            <label class="el-form-item__label" style="width: 140px">收货人:</label>
            <div class="el-form-item__content">
              <div class="el-input el-input--small" style="width: 203px">
                <input type="text" autocomplete="off" placeholder="收货人姓名/手机号码" v-model="SearchInput2" class="el-input__inner" />
              </div>
            </div>
          </div>
          <div class="el-form-item el-form-item--small">
            <label class="el-form-item__label" style="width: 140px">提交时间:</label>
            <div class="el-form-item__content">
              <div class="el-input el-input--small" style="width: 203px">
                <el-date-picker v-model="SearchInput3" type="date" placeholder="选择日期"> </el-date-picker>
              </div>
            </div>
          </div>
          <div class="el-form-item el-form-item--small">
            <label class="el-form-item__label" style="width: 140px">订单状态:</label>
            <div class="el-form-item__content">
              <div class="el-input el-input--small" style="width: 203px">
                <el-select v-model="value1" placeholder="请选择">
                  <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="el-form-item el-form-item--small">
            <label class="el-form-item__label" style="width: 140px">订单分类:</label>
            <div class="el-form-item__content">
              <div class="el-input el-input--small" style="width: 203px">
                <el-select v-model="value2" placeholder="全部">
                  <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="el-form-item el-form-item--small">
            <label class="el-form-item__label" style="width: 140px">订单来源:</label>
            <div class="el-form-item__content">
              <div class="el-input el-input--small" style="width: 203px">
                <el-select v-model="value3" placeholder="全部">
                  <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </div>
            </div>
          </div>
        </form>
      </form>
    </div>
    <div class="el-card operate-container is-never-shadow">
      <div class="el-card__body">
        <i class="el-icon-tickets"></i>
        <span>数据列表</span>
      </div>
    </div>
    <div class="table-container">
      <el-table :data="orderList" border style="width: 100%">
        <el-table-column align="center" type="selection"> </el-table-column>
        <el-table-column label="编号" width="80px" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.id }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="订单编号" width="180px" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.orderSn }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="提交时间" width="180px" align="center">
          <template slot-scope="scope">
            <div>{{ orderTime(scope.row.createTime) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="用户账号" width="500px" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.memberUsername }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="订单金额" align="center">
          <template slot-scope="scope">
            <div>￥{{ scope.row.totalAmount }}</div>
          </template>
        </el-table-column>
        <el-table-column label="支付方式" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.payType == 0">未付款</div>
            <div v-if="scope.row.payType == 1">支付宝</div>
            <div v-if="scope.row.payType == 2">微信</div>
          </template>
        </el-table-column>
        <el-table-column label="支付来源" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.sourceType == 0">PC订单</div>
            <div v-if="scope.row.sourceType == 1">APP订单</div>
          </template>
        </el-table-column>
        <el-table-column label="订单状态" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.status == 0">待付款</div>
            <div v-if="scope.row.status == 1">待发货</div>
            <div v-if="scope.row.status == 2">已发货</div>
            <div v-if="scope.row.status == 3">已完成</div>
            <div v-if="scope.row.status == 4">已关闭</div>
            <div v-if="scope.row.status == 5">无效订单</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px" align="center">
          <template slot-scope="scope">
            <div style="height: 30px">
              <el-button style="float: left; width: 80px" size="mini" @click="viewOrder(scope.row.id)">查看订单</el-button>
              <el-button style="float: right; width: 80px" size="mini" v-if="scope.row.status == 1">发货订单</el-button>
              <el-button style="float: right; width: 80px" size="mini" v-if="scope.row.status == 2">订单跟踪</el-button>
              <el-button style="float: right; width: 80px" size="mini" v-if="scope.row.status == 3">订单跟踪</el-button>
              <el-button style="float: right; width: 80px" size="mini" type="danger" v-if="scope.row.status == 4">删除订单</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { fetchOrderList, mkfsTime } from '@/api/api'

export default {
  data() {
    return {
      value1: '',
      value1: '',
      value2: '',
      value3: '',
      SearchInput1: '',
      SearchInput2: '',
      SearchInput3: '',
      orderList: [],
      options1: [
        {
          value: '选项1',
          label: '待付款',
        },
        {
          value: '选项2',
          label: '待发货',
        },
        {
          value: '选项3',
          label: '已发货',
        },
        {
          value: '选项4',
          label: '已完成',
        },
        {
          value: '选项5',
          label: '已关闭',
        },
      ],
      options2: [
        {
          value: '选项1',
          label: '正常订单',
        },
        {
          value: '选项2',
          label: '秒杀订单',
        },
      ],
      options3: [
        {
          value: '选项1',
          label: 'PC订单',
        },
        {
          value: '选项2',
          label: 'APP订单',
        },
      ],

      pageInfo: {
        // 每页多少条
        pageSize: 0,
        // 当前页
        currentPage: null,
        // 总条数
        total: 0,
      },
      currentPage4: 5,
    }
  },
  methods: {
    // 重置
    resetOrder() {
      this.value1 = ''
      this.value2 = ''
      this.value3 = ''
      this.SearchInput1 = ''
      this.SearchInput2 = ''
      this.SearchInput3 = ''
    },
    // 时间
    orderTime(time) {
      return mkfsTime(time)
    },
    // 查询结果
    queryResults() {
      this.orderList = this.orderList.filter((item) => item.orderSn !== this.SearchInput1)
    },
    // 查询订单跳转
    viewOrder(id) {
      this.$router.push({ path: '/oms/orderDetail', query: { id } })
    },
  },
  created() {
    fetchOrderList(this.pageInfo.currentPage, 10).then((res) => {
      console.log(res.data.list)
      this.pageInfo.currentPage = res.data.pageNum
      this.orderList = res.data.list
    })
    this.orderTime
  },
}
</script>

<style lang="scss">
.el-button--primary {
  float: right;
}
.btn-search {
  float: right;
  margin-right: 15px !important;
}
.table-container {
  margin-top: 20px;
  border: 1px solid #ebeef5;
}
.cell {
  font-size: 12px;
}
</style>
